<script setup>
import { onMounted, ref } from 'vue'
import { getUserInfoAPI, publicUploadAPI } from '@/api/login'
import { myAttendCourse } from '@/api/home'
import { useRouter } from 'vue-router'
import { courseList } from '@/api/teacher'

const router = useRouter()

const user = require('../image/user.png')
const form = ref({ imgPath: null })
const week = ref(['周一', '周二', '周三', '周四', '周五', '周六', '周日'])
const wIndex = ref(0)
const list = ref([])
const roleType = ref(4)
// const dailyCourse = ref([])
const infoData = async () => {
	const res = await getUserInfoAPI()
	if (res) {
		form.value = res.data
	}
	await myAttendCourseFn()
}
const myAttendCourseFn = async () => {
	list.value = []
	if (roleType.value === 4) {
		const res = await myAttendCourse({ page: 0, week: week.value[wIndex.value] })
		if (res) {
			list.value = res.data
		}
	} else {
		const res = await courseList({ week: week.value[wIndex.value] || '' })
		if (res) {
			list.value = res.data
		}
		console.log('roleType', roleType.value)
	}
}
const toUpdatePass = () => {
	router.push({
		path: '/updatePass',
	})
}
const tabDay = (i) => {
	wIndex.value = i
	myAttendCourseFn()
}
const randomBackground = () => {
	const num = Math.floor(Math.random() * 3)
	return num === 0 ? '#E4F5DC' : num === 1 ? '#FFEBEB' : '#F6F2D0'
}

const afterRead = async (file) => {
	console.log(file.file)
	const formData = new FormData()
	formData.append('file', file.file)

	const res = await publicUploadAPI(formData)
	if (+res.code === 200) {
		const userInfo = await getUserInfoAPI()
		if (userInfo) {
			form.value = userInfo.data
		}
	}
}
onMounted(() => {
	roleType.value = +localStorage.getItem('role_type')
	const getDay = new Date().getDay()
	if (getDay > 0 && getDay < 6) {
		wIndex.value = getDay - 1
	} else {
		if (getDay === 0) {
			wIndex.value = 6
		} else {
			wIndex.value = 5
		}
	}
	infoData()
})
</script>

<template>
	<div class="pages">
		<div class="header">
			<img src="../image/my-background.png" alt="" class="topBackground" />
			<div class="user-data">
				<div class="left">
					<van-uploader :after-read="afterRead" capture="camera" accept="image/*">
						<img :src="form.imgPath ? form.imgPath : user" alt="" />
					</van-uploader>
				</div>
				<div class="right">
					<div>
						<p class="name">{{ form.realName }}</p>
						<p v-if="roleType === 4">学工号：{{ form.userName }}</p>
						<p v-else>教工号：{{ form.userName }}</p>
					</div>
					<div class="update-pass" @click="toUpdatePass">修改密码</div>
				</div>
			</div>
			<div class="user-content">
				<div style="float: left">
					<p v-if="roleType === 4">年级：{{ form.grade }}</p>
					<p>部门院系：{{ form.faculty }}</p>
					<p v-if="roleType === 4">入学日期：{{ form.entranceDate }}</p>
					<p v-if="roleType === 4">学籍状态：{{ +form.studentStatus === 0 ? '在籍' : '不在籍' }}</p>
				</div>
			</div>
		</div>
		<div class="content">
			<p class="title">我上过的课程</p>
			<div class="menu">
				<div
					class="row"
					v-for="(item, index) in week"
					:key="index"
					:class="index === wIndex ? 'active' : ''"
					@click="tabDay(index)"
				>
					{{ item }}
				</div>
			</div>
			<div class="day-work">
				<div
					v-for="(item, index) in list"
					:key="index"
					class="row"
					:style="{ background: randomBackground() }"
				>
					<div class="className">{{ item.courseName }}</div>
					<div class="classData">
						<p class="classTime" v-if="+roleType !== 4">{{ item.courseName }}</p>
						<p class="classTime">{{ item.startTime }} - {{ item.endTime }}</p>
						<p class="classLocation">{{ item.address }}</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
.pages {
	padding-bottom: 34px;
	min-height: 100%;
	background: #fff;
	box-sizing: border-box;
	position: relative;

	.header {
		position: relative;
		z-index: 1;
		width: 100%;
		height: 450px;
		padding: 100px 30px 0;
		box-sizing: border-box;
		margin-bottom: 44px;

		.user-data {
			display: flex;
			padding-left: 20px;

			.left {
				width: 80px;
				height: 80px;
				border-radius: 50%;

				img {
					width: 80px;
					height: 80px;
					border-radius: 50%;
				}
			}

			.right {
				display: flex;
				justify-content: space-between;
				margin-left: 22px;

				.update-pass {
					width: 200px;
					color: #22baff;
					padding-left: 20px;
				}

				p {
					&:first-child {
						font-size: 32px;
						font-family: 'Microsoft YaHei UI', serif;
						font-weight: 600;
						color: #000000;
						margin-bottom: 18px;
					}

					&:last-child {
						font-size: 24px;
						font-family: 'Microsoft YaHei UI', serif;
						font-weight: 400;
						color: #333333;
					}
				}
			}
		}

		.user-content {
			width: 690px;
			margin-top: 32px;
			/* height: 240px; */
			background: #ebf7ff;
			border-radius: 8px;
			font-size: 28px;
			font-family: 'Microsoft YaHei UI', serif;
			font-weight: 400;
			color: #000000;
			line-height: 52px;
			padding: 16px 28px;
			box-sizing: border-box;
			float: left;
		}
	}

	.upload-content {
		float: right;
	}

	.topBackground {
		width: 100%;
		height: 416px;
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
	}

	& > .title {
		font-size: 44px;
		font-family: 'Microsoft YaHei UI', serif;
		font-weight: 400;
		color: #ffffff;
		letter-spacing: 1px;
		text-shadow: 0 4px 8px #1e96e1;
		padding: 94px 0 58px;
		text-align: center;
	}

	.content {
		padding: 0 30px;
		box-sizing: border-box;

		.title {
			font-size: 28px;
			font-family: 'Microsoft YaHei UI', serif;
			font-weight: 600;
			color: #000000;
			margin-bottom: 24px;
		}

		.menu {
			display: flex;
			justify-content: space-between;

			& > div {
				width: 129px;
				height: 74px;
				border-radius: 16px 16px 0 0;
				border: 2px solid #eaeaea;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28px;
				font-family: 'Microsoft YaHei UI', serif;
				font-weight: 600;
				color: #4690c0;

				&.active {
					background: #ffffff;
					color: #000000;
					border-bottom: 0;
				}
			}
		}

		.day-work {
			background: #ffffff;
			border-radius: 0 0 16px 16px;
			width: 100%;
			padding: 24px 28px;
			box-sizing: border-box;
			border: 2px solid #eaeaea;
			border-top: 0;

			.row {
				min-height: 180px;
				/* background: #f6f2d0; */
				border-radius: 16px;
				padding: 22px 25px 30px;
				box-sizing: border-box;
				margin-bottom: 20px;

				.className {
					font-size: 28px;
					font-family: 'Microsoft YaHei UI', serif;
					font-weight: 500;
					color: #000000;
					margin-bottom: 20px;
				}

				.classData {
					width: 586px;
					min-height: 120px;
					background: #ffffff;
					border-radius: 20px;
					padding: 30px 48px 24px;
					box-sizing: border-box;

					.classTime {
						text-align: center;
						font-size: 32px;
						font-family: 'Microsoft YaHei UI', serif;
						font-weight: 600;
						color: #000000;
						margin-bottom: 16px;
					}

					.classLocation {
						font-size: 24px;
						font-family: 'Microsoft YaHei UI', serif;
						font-weight: 400;
						color: #666666;
						margin-bottom: 34px;
						text-align: center;
					}

					.submit {
						display: flex;
						justify-content: space-between;

						div {
							width: 212px;
							height: 60px;
							border-radius: 30px;
							font-size: 28px;
							font-family: 'Microsoft YaHei UI', serif;
							font-weight: 600;
							color: #ffffff;
							display: flex;
							justify-content: center;
							align-items: center;
						}

						.attendClass {
							background: linear-gradient(180deg, #85f3c3 0%, #3cdb4e 100%);
							box-shadow: 0 4px 6px 0 rgba(59, 204, 140, 0.4);
						}

						.attendClass-disabled {
							background: linear-gradient(180deg, #85f3c3 0%, #3cdb4e 100%);
							box-shadow: 0 4px 6px 0 rgba(59, 204, 140, 0.4);
							opacity: 0.39;
						}

						.getOutOfClass {
							background: linear-gradient(180deg, #78d9ff 0%, #22baff 100%);
							box-shadow: 0 4px 6px 0 rgba(46, 169, 255, 0.4);
						}

						.getOutOfClass-disabled {
							background: linear-gradient(180deg, #78d9ff 0%, #22baff 100%);
							box-shadow: 0 4px 6px 0 rgba(46, 169, 255, 0.4);
							opacity: 0.39;
						}
					}
				}
			}
		}
	}
}
</style>
